<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <ul id="ul1">
        <li>zs</li>
        <li>ls</li>
        <li>wu</li>
    </ul>

    <input id="inputstr">
    <button onclick="addli()">添加</button>

    <script>
        function addli() {

            var inputNode = document.getElementById("inputstr")
            var ulNode = document.getElementById("ul1")

            var textNode = document.createTextNode(inputNode.value)

            // 创建一个li结点
            var liNode = document.createElement("li")
            // li结点需要个孩子Node对象,   文本类型对象
            liNode.appendChild( textNode )

            // appendChild 是给一个结点添加一个孩子
            // 参数: 需要一个孩子 ( -> 给ul结点添加一个li结点孩子)
            ulNode.appendChild( liNode )


            inputNode.value = ""
        }


    </script>

</body>
</html>
